<template>
  <div id="finder">
    <!--<Dslot :link="links">Save</Dslot>-->
    <!--<component :is="Dslot"></component>-->
    <button :class="['tab-button',{active:current === tab}]" v-for="(tab,index) in tabs" :key="index" @click="current = tab">{{tab}}</button>

    <keep-alive>
      <component :is="currentTabComponent" class="tab animated slideInLeft"></component>
    </keep-alive>
  </div>
</template>

<script>
  //import Dslot from '../../components/d-slot'
  import home from '../../components/tabHome'
  import post from '../../components/tabPost'
  import archive from '../../components/tabArchive'

  export default {
    name: "finder",
    data() {
      return {
        links: {id: '0', src: 'http://www.baidu.com', title: '百度'},
        current:'home',
        tabs:['home','post','archive']
      }
    },
    components: {
      home,post,archive
    },
    mounted(){

    },
    computed:{
      currentTabComponent:function(){
        return this.current.toLowerCase();
      }
    }
  }
</script>

<style scoped>
  .tab-button {
    padding: 6px 10px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid #ccc;
    cursor: pointer;
    background: #f0f0f0;
    margin-bottom: -1px;
    margin-right: -1px;
  }
  .tab-button:hover {
    background: #e0e0e0;
  }
  .tab-button.active {
    background: #e0e0e0;
  }
  .tab {
    border: 1px solid #ccc;
    padding: 10px;
  }
</style>
